var app = {
    querystring: null,
    initialize: function() {
        this.bind();
    },
    bind: function() {
        document.addEventListener('deviceready', this.deviceready, false);
    
        $().ready(function(){
            for (var i = 0; i < window.localStorage.length; i++) {
                var slug = window.localStorage.key(i);
                var item = window.localStorage.getItem(slug);
                var data = JSON.parse(item);

                $('.history-links').append($("<button class='history-item' data-id='" + slug + "' data-name='" + data.filename + "' data-hash='" + data.hash + "'>" + data.filename + "<span>&rsaquo;</span></button>"));
            };

            $('#clear_storage').click(function(){
                clear_storage();
                location.reload(true);
            });
                  
            $('.history-item').click(function(){
                var slug = $(this).data('id');
                var name = $(this).data('name');
                var hash = $(this).data('hash');
                window.location.href = 'share.html?slug=' + slug + '&name=' + name + '&hash=' + hash;
                });
             });
    },
    deviceready: function() {
        // note that this is an event handler so the scope is that of the event
        // so we need to call app.report(), and not this.report()
        app.report('deviceready');
    },
    report: function(id) { 
        console.log("report:" + id);
        // hide the .pending <p> and show the .complete <p>
        document.querySelector('#' + id + ' .pending').className += ' hide';
        var completeElem = document.querySelector('#' + id + ' .complete');
        completeElem.className = completeElem.className.split('hide').join('');
    }
};